import { X, Sparkles } from "lucide-react";
import type { Memo } from "@/services/memo.service";
import { MoodEmoji } from "./MoodEmoji";

interface MemoEditModalProps {
  memo: Memo;
  onContentChange: (content: string) => void;
  onMoodSelect: (level: 1 | 2 | 3 | 4 | 5) => void;
  onClose: () => void;
  onSave: () => void;
}

export function MemoEditModal({
  memo,
  onContentChange,
  onMoodSelect,
  onClose,
  onSave,
}: MemoEditModalProps) {
  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50">
      <div className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-2xl">
        <div className="bg-card rounded-lg p-6 shadow-xl">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold">编辑笔记</h2>
            <button
              onClick={onClose}
              className="p-2 hover:bg-accent rounded-lg transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          <div className="space-y-6">
            {/* 心情选择 */}
            <div>
              <label className="block text-sm font-medium mb-2">
                此刻的心情
              </label>
              <div className="flex gap-4">
                {[5, 4, 3, 2, 1].map((level) => (
                  <button
                    key={level}
                    onClick={() => onMoodSelect(level as 1 | 2 | 3 | 4 | 5)}
                    className={`text-2xl p-2 rounded-lg transition-all ${
                      memo.mood?.level === level
                        ? "bg-primary/20 scale-110"
                        : "hover:bg-accent"
                    }`}
                  >
                    <MoodEmoji level={level as 1 | 2 | 3 | 4 | 5} />
                  </button>
                ))}
              </div>
            </div>

            {/* 笔记内容 */}
            <div>
              <label className="block text-sm font-medium mb-2">
                记录此刻的想法
              </label>
              <textarea
                className="w-full px-3 py-2 border rounded-lg bg-background min-h-[200px]"
                placeholder="写下你的心路..."
                value={memo.content}
                onChange={(e) => onContentChange(e.target.value)}
              />
            </div>

            {/* 按钮组 */}
            <div className="flex justify-end gap-4 pt-4">
              <button
                onClick={onClose}
                className="px-4 py-2 text-sm rounded-lg hover:bg-accent transition-colors"
              >
                取消
              </button>
              <button
                onClick={onSave}
                className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
              >
                <div className="flex items-center gap-2">
                  <Sparkles className="w-4 h-4" />
                  保存并获取 AI 建议
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 